<template>
	<view>
		<!-- 自定义导航栏 -->
		<!-- height: var(--status-bar-height); 自动匹配各个手机端的高度 -->
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%"></view>
		<view class="flex align-center justify-center">
			<u-select v-model="show1" :list="isopenList" @confirm="confirm"></u-select>
			<view class="">
				{{ isopen.label }}
			</view>
			<text @click="show1 = true" class="iconfont icon-shezhi"></text>
		</view>

		<!-- 内容区域 -->
		<textarea name="" id="" cols="30" rows="10" :value="content" class="p-1 w-100" style="box-sizing: border-box" placeholder="说一句吧~" @input="inputcontext"></textarea>

		<!-- 上传图片 -->
		<uploadImage v-show="show" ref="upload" @upimage="upimage" :list="imageList"></uploadImage>

		<view hover-class="bg-main" @click="chooesTopic" class="border px-2 ml-3" style="width: 200rpx; border-radius: 8px">
			话题：{{ topicTitle === '' ? '请选择' : topicTitle }}
		</view>

		<picker mode="selector" :value="index" @change="chooesPost" :range="range">
			<view hover-class="bg-main" class="border px-2 mt-4 ml-3" style="width: 200rpx; border-radius: 8px">分类：{{ postTitle === '' ? '请选择' : postTitle }}</view>
		</picker>

		<!-- 底部 -->
		<view class="fixed-bottom flex align-center justify-between" style="height: 150rpx">
			<!-- 三个图标 -->
			<view class="flex align-center justify-around" style="font-size: 50rpx; width: 260rpx">
				<picker mode="selector" :value="index" @change="chooesPost" :range="range">
					<view class="iconfont icon-caidan animated" hover-class="fadeIn"></view>
				</picker>
				<view class="iconfont icon-huati animated" hover-class="fadeIn" @click="chooesTopic"></view>
				<view class="iconfont icon-tupian animated" hover-class="fadeIn" @click="uploadImage"></view>
			</view>
			<!-- 发布按钮 -->
			<view @click="publish" class="flex align-center justify-center bg-main text-white mr-2 rounded animated" style="width: 140rpx; height: 60rpx" hover-class="fadeIn">
				<view>发布</view>
			</view>
		</view>
	</view>
</template>

<script>
import uploadImage from '@/compoment/IndexCommen/Uploadimage.vue';
import { delImg } from '../../request/Api/post';
import { getList, publishPost } from '@/request/Api/post.js';
export default {
	data() {
		return {
			topicId: 0,
			topicTitle: '',
			index: 0,
			range: [1, 2, 3],
			postId: 0,
			postTitle: '',
			imageList: [],
			content: '',
			back: true,
			address: '',
			show1: false,
			isopen: {
				value: 1,
				label: '公开'
			},
			isopenList: [
				{
					value: 1,
					label: '公开'
				},
				{
					value: 2,
					label: '仅自己可见'
				}
			]
		};
	},
	components: {
		uploadImage
	},
	computed: {
		show() {
			return this.imageList.length > 0;
		}
	},
	methods: {
		publish() {
			let list = this.imageList.map((res) => {
				return res.id;
			});
			if (this.postId !== 0 && this.topicId !== 0 && this.content !== '') {
				this.back = false;
				publishPost({
					imageId: list,
					content: this.content,
					topicId: this.topicId,
					postClassId: this.postId,
					isopen: this.isopen.value
				})
					.then((res) => {
						uni.showToast({
							title: '发布成功',
							icon: 'none',
							success() {
								uni.navigateBack({
									delta: 1
								});
							}
						});
					})
					.catch((res) => {
						uni.showToast({
							title: '发布失败',
							icon: 'none'
						});
					});
			} else {
				if (this.postId === 0) {
					return uni.showToast({
						title: '请选择左下角第一个文章分类',
						icon: 'none'
					});
				}
				if (this.topicId === 0) {
					return uni.showToast({
						title: '请选择左下角第二个话题',
						icon: 'none'
					});
				}
				if (this.content === '') {
					return uni.showToast({
						title: '请填写发布内容',
						icon: 'none'
					});
				}
			}
		},
		chooesPost(e) {
			this.postId = e.detail.value + 1;
			this.postTitle = this.range[e.detail.value];
		},
		confirm(res) {
			this.isopen = res[0];
		},
		// 点击图标触发图片上传
		uploadImage() {
			this.$refs.upload.chooseImage();
		},
		upimage(e) {
			this.imageList = e;
		},
		inputcontext(e) {
			this.content = e.detail.value;
		},
		chooesTopic() {
			uni.navigateTo({
				url: '/pages/topicMore/topicMore?chooes=' + true
			});
		},
		Storage() {
			uni.setStorageSync(
				'publish',
				JSON.stringify({
					content: this.content,
					imageList: this.imageList
				})
			);
		}
	},
	onunload() {
		uni.$off('chooesTopic', (res) => {});
	},
	onLoad() {
		getList().then((res) => {
			this.range = res.data.map((res) => {
				return res.classname;
			});
		});
		uni.$on('chooesTopic', (res) => {
			this.topicId = res.id;
			this.topicTitle = res.title;
		});
		const res = uni.getStorageSync('publish');
		if (res) {
			let result = JSON.parse(res);
			this.imageList = result.imageList;
			this.content = result.content;
		}

		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			success: (res) => {
				this.address = res.address;
			}
		});
	},

	//返回触发返回,为true是不能返回的
	onBackPress() {
		if (this.back === true) {
			if (this.imageList.length !== 0 || this.content !== '') {
				uni.showModal({
					cancelText: '不保存',
					title: '保存为草稿吗',
					confirmText: '保存',
					success: (res) => {
						// 保存逻辑
						if (res.confirm) {
							this.Storage();
						} else {
							uni.removeStorageSync('publish');
							if (this.imageList.length !== 0) {
								delImg(
									this.imageList.map((res) => {
										return res.id;
									})
								);
							}
						}
						this.back = false;
						uni.navigateBack({
							delta: 1
						});
					}
				});
			} else {
				this.back = false;
			}
		}
		return this.back;
	}
};
</script>

<style lang="scss"></style>
